<template>
  <!-- :class="{'switch':swtich}" -->
  <div class="user-page" @keydown.enter="login">
    <!--<div class="login-trace">登录后查看定制追踪的内容</div>-->
    <div class="login-form">
      <div class="login-phone">手机号登录</div>
      <div class="error-tipsBox">
        <span v-show="validateError" class="valid-error-tips"><i class="error-tips"><img src="../../assets/svg/error-tip.svg" alt=""></i>{{loginErrorStr}}</span>
      </div>
      <input-com class="input-block" type="text" label="手机号" :maxLength="11" @result="phoneValue"></input-com>
      <input-com class="input-block" type="password" label="密码" :maxLength="20" @result="passwordVal"></input-com>
      <div class="text-right">
        <span class="to-page" @click="goGegister">没有账号？</span>
        <span class="to-page" @click="goResterPassWord">忘记密码</span>
      </div>
      <button class="login-go" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
  import InputCom from '../input/input-plugin'
  export default {
    name: 'login',
    data () {
      return {
        phone: '',
        passWord: ''
      }
    },
    props: {
      swtich: {
        require: true,
        type: Boolean
      },
      validateError: {
        require: true,
        type: Boolean
      },
      loginErrorStr: {
        require: true,
        type: String
      }
    },
    components: {
      InputCom
    },
    methods: {
      login () {
        const data = {
          phone: this.phone,
          password: this.passWord
        }
        let valData = [
          {
            regex: 'phone',
            message: '手机号码不能为空或者格式不正确',
            data: this.phone
          },
          {
            regex: 'password',
            message: '密码不能为空或者密码长度不能少于6位数字',
            data: this.passWord
          }
        ]
        let status = this.$validation(valData)
        if (status === true) {
          this.$emit('loginValSuc', data)
        } else {
          this.$emit('error', status)
        }
      },
      phoneValue (val) {
        this.phone = val
      },
      passwordVal (val) {
        this.passWord = val
      },
      goResterPassWord () {
        this.$emit('goRester', true)
      },
      goGegister () {
        this.$emit('switchStatus', true)
      }
    }
  }
</script>

<style>

</style>
